<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>发布文章</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!-- <el-card class="box-card" type="flex" justify="center"> -->
    <el-card class="box-card">
      <el-form>
        <el-form-item label="标题:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="频道:">
          <el-select placeholder="请选择文章频道">
            <el-option label="推荐" value="shanghai"></el-option>
            <el-option label="html" value="beijing"></el-option>
            <el-option label="开发者咨询" value="shanghai"></el-option>
            <el-option label="C++" value="beijing"></el-option>
            <el-option label="CSS" value="shanghai"></el-option>
            <el-option label="数据库" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
          <el-radio-group>
            <el-radio label="全部"></el-radio>
            <el-radio label="草稿"></el-radio>
            <el-radio label="待审核"></el-radio>
            <el-radio label="审核通过"></el-radio>
            <el-radio label="审核失败"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容">
            <quillEditor></quillEditor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">发布文章</el-button>
          <el-button>存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  name: 'PublishPage',
  data () {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang='scss'>
// 去除el-card默认阴影
::v-deep .is-always-shadow {
  box-shadow: none;
}
</style>
